// 工具封装
// 根据id来获取元素
// 定义$为document.getElementById()
function $(id) {
    return document.getElementById(id);
  }
  
  // 创建div, className是其类名
  function creatediv(className) {
    var div = document.createElement('div');
    div.className = className;
    return div;
  }
  var clock = null;
  var state = 0;
  var speed = 5;
  var flag = false;
  
  //点击开始游戏按钮 开始游戏
  function start() {
    if (!flag) {
      init();
      var star = document.querySelector('.start')
      star.innerText = '暂停游戏'
      star.style.background = 'orange'
    } else {

      alert('游戏已暂停，点击确定继续游戏。');
    }
  }
  
  /*
   *    初始化 init
   */
  function init() {
    flag = true;
    for (var i = 0; i < 4; i++) {
      createrow();  //此处遍历四次，就是执行4次此函数
    }
  
    // 添加onclick事件
    $('main').onclick = function (ev) {
      ev = ev || event;
      judge(ev);
    };
  
    // 定时器 每30毫秒调用一次move()
    clock = window.setInterval('move()', 30);
  }
  
  // 判断是否点击黑块、白块
  function judge(ev) {
    // console.log(ev.target)
    if (
      ev.target.className.indexOf('black') == -1 &&
      ev.target.className.indexOf('cell') !== -1
    ) {
      ev.target.parentNode.pass1 = 1; //定义属性pass1，表示此行row的白块已经被点击
    }
  
    if (ev.target.className.indexOf('black') !== -1) {
      //点击目标元素 类名中包含 black 说明是黑块
      ev.target.className = 'cell';
      ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
      score();
    }
  }
  
  // 判断游戏是否结束
  
  function over() {
    var rows = $('con').childNodes;
    if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {  //最底下一行的黑块没有被点击，返回fail
      fail();
    }
    for (let i = 0; i < rows.length; i++) {  //遍历每一行的白块有没有被点击，有则返回fail
      if (rows[i].pass1 == 1) {
        fail();
      }
    }
  }
  
  // 游戏结束
  function fail() {
    clearInterval(clock);
    flag = false;
    window.alert('你的最终得分为 ' + parseInt($('score').innerText));
    var con = $('con');
    con.innerHTML = '';
    $('score').innerText = 0;
    con.style.top = '-408px';
    speed = 5;
    var star = document.querySelector('.start')
    star.innerText = '开始游戏'
    star.style.background = 'yellowgreen'
  }
  
  // 创造一个<div class="row">并且有四个子节点<div class="cell">
  function createrow() {
    var con = $('con');
    var row = creatediv('row'); //创建div className=row
    var arr = creatcell(); //定义div cell的类名,其中一个为cell black
  
    con.appendChild(row); // 添加row为con的子节点
  
    for (var i = 0; i < 4; i++) {
      row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
    }
  
    if (con.firstChild == null) {
      con.appendChild(row);
    } else {
      con.insertBefore(row, con.firstChild);
    }
  }
  
  // 创建一个类名的数组，其中一个为cell black, 其余为cell
  function creatcell() {
    var temp = ['cell', 'cell', 'cell', 'cell'];
    var i = Math.floor(Math.random() * 4); //随机产生黑块的位置 Math.random()函数参数 0~1的随机数 (把数控制在0~3，所以乘以4在向下取整是最好的)
    temp[i] = 'cell black';
    return temp;
  }
  
  //让黑块动起来
  function move() {
    var con = $('con');
    var top = parseInt(window.getComputedStyle(con).top);
    // console.log(top)
    if (speed + top > 0) {
      top = 0;
    } else {
      top += speed;
    }
    con.style.top = top + 'px'; //不断移动top值，使它动起来
    over();
    if (top == 0) {
      createrow();
      con.style.top = '-102px';
      delrow();
    }
  }
  
  // 加速函数
  function speedup() {
    speed += 1;
    if (speed >= 20) {
      alert('你好牛逼！');
    }
  }
  
  //删除某行
  function delrow() {
    var con = $('con');
    if (con.childNodes.length == 6) {
      con.removeChild(con.lastChild);
    }
  }
  
  // 记分
  function score() {
    var newscore = parseInt($('score').innerText) + 1; //分数加一
    $('score').innerText = newscore; //修改分数
    if ($('score').innerText % 10 == 0) {
      //当分数是10 的倍数时使用加速函数，越来越快
      speedup();
    }
  }